<template>
  <XForm ref="XForm" :formList="formList" :formData="formData" :formRules="formRules" label-width="60px">
    <template v-slot:btn>
      <el-button @click="onSubmit" type="primary">立即创建</el-button>
      <el-button @click="reset">重 置</el-button>
    </template>
  </XForm>
</template>

<script>
import rules from '@/utils/rules'
import { XForm } from '@/components/@fhsy/x-tool'
export default {
  components: {
    XForm
  },
  data () {
    return {
      formList: [
        { label: '昵称', prop: 'name' },
        { label: '手机', prop: 'phone' },
        { label: '邮箱', prop: 'email', span: 24 },
        { slot: 'btn', span: 24 }
      ],
      formData: {},
      formRules: {
        name: [
          { required: true, message: '请输入昵称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { validator: rules.phone, trigger: 'blur' }
        ],
        email: [{ validator: rules.email, trigger: 'blur' }]
      }
    }
  },
  methods: {
    onSubmit () {
      this.$refs['XForm'].validate(valid => { // 调用 XForm 的表单校验方法
        if (!valid) {
          this.$message.warning('请完善表单信息')
          return false
        }
        this.$message(JSON.stringify(this.formData))
      })
    },
    reset () {
      this.$refs['XForm'].resetFields()
    }
  }
}
</script>
